<template>
    <div class="product-list-main">
        <div class="product-list">
            <router-link id="" to="">
            <div class="item clearfix" v-for="item in productList">
                <img src="" class="pro-img fl"/>
                <div class="pro-msg fl">
                    <p class="pro-name">{{item.productName}}</p>
                    <p class="pro-info">{{item.color}}；&nbsp;{{item.size}}</p>
                    <div class="pro-price clearfix"><span class="store-price fl">￥&nbsp;{{item.storePrice}}</span><span class="market-price fl">￥{{item.marketPrice}}</span><span class="number fr">x{{item.num}}</span></div>
                </div>
            </div>
            </router-link>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue'
    export default {
        data () {return {
            productList:[{productName:'ONLY 日系百搭短袖衬衫女夏人百搭短袖衬衫百搭短袖人百搭短袖衬衫百搭',color:'粉色',size:'S',storePrice:'86',marketPrice:'186',num:'2'},{productName:'ONLY 日系百搭短袖衬衫女夏人百搭短袖衬衫百搭短袖人百搭短袖衬衫百搭',color:'粉色',size:'S',storePrice:'86',marketPrice:'186',num:'2'}]
        }},
        name: 'app',
        methods:{

        }
    }
</script>
<style lang="scss">
  .product-list-main{
    .product-list{width: 100%; height: 100%; border-top: 0.2rem solid #f4f5f5;}
    a{ display: block; width: 100%; height: 2.1rem;}
    .item{
      width: 100%; height: 2.1rem; border-bottom: 1px solid #f4f5f5; background:#fff;
      .pro-img{display: block; width: 1.8rem; height: 1.8rem; padding: 0.14rem 0.4rem 0.16rem 0.3rem;}
      .pro-msg{
        padding-top: 0.1rem;
        .pro-name{width: 4.66rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; font-size:0.26rem; line-height: 0.3rem; color: #333;}
        .pro-info{padding:0.24rem 0 0.34rem 0; height: 0.24rem; font-size: 0.24rem; line-height: 0.24rem; color: #999;}
      }
      .pro-price{
        height: 0.32rem;
        .store-price{height: 0.32rem; font-size: 0.32rem; line-height: 0.32rem; color: #ff365d;}
        .market-price{padding: 0.08rem 0 0 0.2rem; height: 0.24rem; font-size: 0.24rem; text-decoration: line-through; line-height: 0.24rem; color: #999;}
        .number{padding-top: 0.08rem; height: 0.24rem; font-size: 0.24rem; line-height: 0.24rem; color: #333;}
      }
    }
  }

</style>
